<!-- 选择单元 -->
<template>
	<view class="nl-box-padding nl-floor-pad">
		<!-- 搜索 -->
		<view class="nl-search-box">
			<view class="search">
				<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
				<u-input v-model="inputdata" class="input" type="text" placeholder="输入单元编号" />
				<view class="button" @click="searchUnit()">搜索</view>
			</view>
		</view>
		<!-- 内容 -->
		<view v-if="hasNet">
			<view class="scroll-box" v-if="hasInfo">
				<view class="nl-flex-list active" v-for="(item,index) in data" :key="index" @click="selectUnit(item)">
					<view class="icon"></view>
					<text>{{item.unitNum}} 单元</text>
				</view>
			
				<u-loadmore :status="status" margin-top="40" />
			</view>
			
			<view v-else>
				<noData noDataText="暂无单元"></noData>
			</view>
		</view>
		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {
		getQueryUnits
	} from "@/api/common"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				data: [],
				//输入到搜索框的数据
				inputdata: "",
				//判断搜索框是否有数据
				showSearchData: false,
				//搜索到的数据
				searchData: '',
				//得到楼段id
				floorId: '',

				html: '',
				hasInfo: true, //是否有数据
				hasNet: true, //是否有网络

				listBox: [], // 避免上拉刷新时，页面出现空白
				page: 1,
				records: 0,
				status: 'loadmore',
			}
		},
		onReachBottom(){
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发
			
			} else {
				this.status = 'loading'
				if (this.page <= this.records) {
					this.getQueryUnits(this.page)
				} else {
					this.status = 'nomore'
				}
			}
		},
		onLoad(option) {
			console.log('option',option)
			this.html = option.html || '';
			this.floorId = option.floorId || '';
			this.getQueryUnits(1)
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.records = 0
			this.listBox = []
			this.getQueryUnits(1)
		},
		methods: {
			/**
			 * 查询单元列表
			 */
			getQueryUnits(page) {
				let that = this
				let data = {
					communityId: that.userCommunity.communityId, //小区编号
					floorId: that.floorId,
					unitNum: that.inputdata,
					page: page,
					row: 15
				}
				getQueryUnits(data).then((res) => {
					console.log('getQueryUnits', res)
					that.hasNet = true
					that.status = 'nomore'
					uni.stopPullDownRefresh()
					for (let i of res) {
						that.listBox.push(i)
					}

					that.data = that.listBox
					that.hasInfo = that.data.length === 0 ? false : true

				}).catch((err) => {
					this.hasNet = false
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 选择单元
			 */
			selectUnit(item) {
				console.log('selectUnit', item)
				console.log('selectUnit', this.html)
				if (this.html == 'addResidents') {
					uni.navigateTo({
						url: `../selectHouse/selectHouse?html=addResidents&floorId=${item.floorId}&unitId=${item.unitId}`
					})
				} else {
					let pages = getCurrentPages()
					let nowPage = pages[pages.length - 1]
					let prePage = pages[pages.length - 2]
					prePage.$vm.data.unitNum = item.unitNum
					prePage.$vm.data.unitId = item.unitId
					prePage.$vm.data.house = ''
					prePage.$vm.data.roomId = ''
					uni.navigateBack({
						delta: 1
					})
				}
			},
			/**
			 * 上拉加载
			 */
			onBottom() {
				console.log('页面触底了')
				if (this.status == 'loading') { // 防止多次触发

				} else {
					this.status = 'loading'
					if (this.page <= this.records) {
						this.getQueryUnits(this.page)
					} else {
						this.status = 'nomore'
					}
				}
			},
			/**
			 * 点击按钮搜索
			 */
			searchUnit() {
				this.listBox = []
				this.getQueryUnits(1)
			},
			/**
			 * 刷新
			 */
			refresh(){
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getQueryFloors(1)
			}
		}
	}
</script>

<style lang="scss">
	.nl-shadow-box {
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
	}

	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
	.nl-floor-pad{
		box-shadow: $nl-box-shadow-grey;
		background-color: $uni-bg-color;
		border-radius: $nl-border-radius-main;
	}

	.nl-search-box {
		padding: 20rpx 0;
		position: sticky;
		top: 0;
		border-bottom: 2rpx solid $uni-bg-color-grey;

		.search {
			height: 72rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #F3F3F3;
		}

		.icon {
			margin: 0 16rpx 0 24rpx;
		}

		.input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin-right: 15rpx;
		}

		.button {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: $nl-color-main;
		}

		.button:active {
			background-color: #0f70d6;
		}
	}

	.scroll-box {
		width: 100%;
		padding-bottom: 20rpx;

		.nl-flex-list {
			.icon {
				width: 28rpx;
				height: 28rpx;
				background-image: url(../../../../static/roomquery/dy.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 16rpx;
			}
		}

		.name {
			flex: 1;
			margin-right: 16rpx;
		}

		.right-grey {
			font-size: $uni-font-size-sm;
			text-align: right;
		}
	}
</style>
